<template>
  <div class="wrap">
    <!-- 这是一个带侧边导航的入口 -->

    <ul class="left">
      <li @click="gotoPage('/index/user')">用户管理</li>
      <!-- 也能写成不封装函数直接跳转 -->
      <!-- <li @click="$router.push('/index/user')">用户管理</li> -->
      <li @click="gotoPage('/index/good')">商品列表</li>
      <li @click="gotoPage('/index/limit')">权限管理</li>
      <li @click="gotoPage('/index/system')">系统管理</li>
      <li @click="gotoPage('/index/order')">订单管理</li>
    </ul>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    gotoPage(path) {
      this.$router.push({ path: path });
    },
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  display: flex;
  .left {
    width: 200px;
    li {
      height: 50px;
      border: 1px solid #3c3c3c;
      line-height: 50px;
      text-align: center;
    }
  }
  .right {
    flex: 1;
  }
}
</style>
